<template>
    <div class="initPage">
        <div class="buttonGroup">

            <teButton
                    @click="openDialog('front', $event)"
                    text="首页"
            ></teButton>
            <teButton
                    @click="openDialog('new_project', $event)"
                    text="新建项目"
            ></teButton>
            <te-button
                    @click="openDialog('open_project', $event)"
                    text="打开项目"
            ></te-button>
            <te-button
                    @click="openDialog('help', $event)"
                    text="帮助说明"
            ></te-button>
            <te-button
                    @click="openDialog('plugins_list', $event)"
                    text="插件列表"
            ></te-button>

            <te-button text="帮助作者"></te-button>
        </div>

        <div class="views">
            <teDialog TitleText="首页" Mark="front" :Visit="dialog">
                <div slot="content"></div>
            </teDialog>

            <teDialog TitleText="新建项目" Mark="new_project" :Visit="dialog">
                <div style="height:100%;" slot="content">
                    <newProject class="animated fadeIn fast"></newProject>
                </div>
            </teDialog>

            <teDialog TitleText="打开项目" Mark="open_project" :Visit="dialog">
                <div style="height:100%;" slot="content">
                    <openProject class="animated fadeIn fast"></openProject>
                </div>
            </teDialog>
            <teDialog TitleText="帮助说明" Mark="help" :Visit="dialog">
                <div slot="content"></div>
            </teDialog>
            <teDialog TitleText="插件列表" Mark="plugins_list" :Visit="dialog">
                <div slot="content"></div>
            </teDialog>
        </div>
    </div>
</template>

<script>
    import teButton from '../../../components/TeUi/TeButton.vue';
    import teDialog from '../../../components/TeUi/TeDialog.vue';

    import newProject  from './NewProjectPage.vue';
    import openProject from './OpenProjectPage.vue';

    export default {
        name      : 'initPage',
        components: {
            teButton,
            teDialog,
            newProject,
            openProject,
        },
        data() {
            return {
                dialog           : 'front',
                newProjectDialog : false,
                openProjectDialog: false,
                helpDialog       : false,
                pluginsList      : false
            };
        },
        methods   : {
            openDialog(dialog, e) {

                this.dialog = dialog;

            }
        },
        mounted() {
            this.$root.store.currentViews.title = '首页';
        }
    };
</script>
<style scoped>
    p {
        margin: 0;
        text-align: center;
        width: auto;
        height: auto;
    }

    .initPage {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .buttonGroup {
        background: #009cff;
        min-width: 190px;
    }

    .views {
        width: 100%;
        min-width: 400px;
        min-height: 500px;
        padding: 20px 24px;
        box-sizing: border-box;
        background: rgb(26, 25, 25);
    }

    .span {
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
        border-top: 1px solid;
    }
</style>
